"use strict";
import * as React from 'react';
import MyText from "./MyText";
import { autoSize, commonStyles } from "../assets/styles/common";
import { reserveStyles } from "../assets/styles/reserve";
import Colors from "../assets/styles/Colors";
import TimeAreaPicker from "./TimeAreaPicker";
import Request from "../utils/Request";
import MyIcon from "./icon";
const moment = require("moment");
const { View, StyleSheet, ImageBackground } = require('react-native');
const { connect } = require('react-redux');
const { List, DatePicker } = require('antd-mobile');
let InputItemStyle = require('antd-mobile/lib/list/style/index');
const { CachedImageBackground } = require('react-native-img-cache');
const newStyle = {};
(() => {
    for (const key in InputItemStyle) {
        if (Object.prototype.hasOwnProperty.call(InputItemStyle, key)) {
            newStyle[key] = Object.assign({}, StyleSheet.flatten(InputItemStyle[key]));
            if (key === 'underlayColor') {
                newStyle['underlayColor'].backgroundColor = 'transparent';
            }
        }
    }
})();
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
class ReserveRoomItem extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            showDataPicker: false,
            selectedDate: this.props.date ? this.props.date : now
        };
        this.showDataPicker = () => {
            this.setState({ showDataPicker: true });
        };
        this.getText = () => {
            let text = '';
            let tip = '今天, ';
            const sm = moment(this.state.selectedDate);
            const n = moment(now);
            text = sm.format('YYYY-MM-DD');
            const diff = sm.diff(n);
            const hour = diff / (1000 * 60 * 60);
            if (hour >= 24 && hour < 48) {
                tip = '明天, ';
            }
            else if (hour >= 48) {
                tip = '';
            }
            return tip + text;
        };
    }
    componentWillReceiveProps(nextProps, nextContext) {
        if (this.props !== nextProps) {
            this.setState({ selectedDate: nextProps.date });
        }
    }
    render() {
        const item = this.props.item;
        return (<List styles={StyleSheet.create(newStyle)}>
                <CachedImageBackground source={{ uri: Request.checkImageUrl(item.img) + '' }} style={reserveStyles.room}>
                    <View style={[commonStyles.flexRow, { justifyContent: 'space-between', alignItems: 'flex-end' }]}>
                        <View>
                            <MyText color={Colors.White} fontSize={20}>房间7A</MyText>
                            <MyText color={Colors.White} fontSize={14}>{`${item.seat}座位`}</MyText>
                        </View>
                        <View style={[commonStyles.flexRow]}>
                            {item.board ? <MyText color={Colors.White} fontSize={16}>白版</MyText> : null}
                            {item.tv ? <MyText color={Colors.White} fontSize={16}>电视</MyText> : null}
                            {item.phone ? <MyText color={Colors.White} fontSize={16}>电话</MyText> : null}
                        </View>
                    </View>
                </CachedImageBackground>

                {this.props.canPickDate ? <List.Item onClick={this.showDataPicker} thumb={<MyIcon name={'icon-riqi'} size={autoSize(15)} color={Colors.SubTitle}/>}>
                    <MyText style={{ marginLeft: 5 }} color={this.state.showDataPicker ? Colors.Active : Colors.Title}>{this.getText()}</MyText>

                </List.Item> : null}

                <TimeAreaPicker {...this.props} start={moment()} date={this.state.selectedDate} roomItem={item}/>

                <DatePicker mode={'date'} minDate={now} visible={this.state.showDataPicker} value={this.state.selectedDate} onOk={selectedDate => this.setState({ selectedDate, showDataPicker: false })} onDismiss={() => this.setState({ showDataPicker: false })}/>
            </List>);
    }
}
export default ReserveRoomItem;
